<ui:composition template="/WEB-INF/templates/layout.xhtml"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui">

  <ui:define name="header">
    <script type="text/javascript" language="javascript" src="scripts/pagos.js"></script>
  </ui:define>
  <ui:define name="content">
    <div id="tabs">
      <ul>
        <li><a href="#tab"><h:outputText
              value="#{commonBean.paginaPagosTitulo}" /></a></li>
      </ul>
      <h:form id="pagosForm">
        <div id="tab">
          <table border="0" cellpadding="2" cellspacing="2"
            style="width: 100%;">
            <tr>
              <td style="width: 130px; font-weight: bold;"><h:outputText
                  value="#{paymentBean.tipoUsuarioTexto}" /></td>
              <td><h:outputText value="#{userManagedBean.username}" /></td>
            </tr>
            <tr>
              <td style="font-weight: bold;"><h:outputLabel
                  for="#{paymentBean.carrera}" value="Carreras:" />
              </td>
              <td>
                <p:selectOneMenu value="#{paymentBean.carrera}" effect="fade" converter="#{carreraConverter}">
                  <f:selectItems value="#{paymentBean.listaCarreras}"
                    var="carrera" itemLabel="#{carrera.nombre}" itemValue="#{carrera}" />
                    <p:ajax event="change" update="TablaPagos" listener="#{paymentBean.cambioCarrera}" process="@this"/>
                </p:selectOneMenu>
              </td>
            </tr>
          </table>
          <br />
          <p:dataTable id="TablaPagos" var="concepto" emptyMessage="No hay registros."
            value="#{paymentBean.conceptosModel}" styleClass="TablaPagos"
            selection="#{paymentBean.listaConceptosSeleccionados}">
            <p:ajax event="rowSelectCheckbox" update="TablaPagos" listener="#{paymentBean.totalizarPagos}"/>
            <p:ajax event="rowUnselectCheckbox" update="TablaPagos" listener="#{paymentBean.totalizarPagos}"/>
            <p:ajax event="toggleSelect" update="TablaPagos" listener="#{paymentBean.totalizarPagos}"/>
            <p:column selectionMode="multiple" styleClass="#{paymentBean.estiloCelda(concepto.recibo)}" />
            <p:column headerText="Nro. Cuota" styleClass="#{paymentBean.estiloCelda(concepto.recibo)} cuota">#{concepto.cuota}</p:column>
            <p:column headerText="#{commonBean.codigoServicioTexto}" styleClass="#{paymentBean.estiloCelda(concepto.recibo)}">#{concepto.codigoServicio}</p:column>
            <p:column headerText="#{commonBean.descripcionTexto}" styleClass="#{paymentBean.estiloCelda(concepto.recibo)}">#{concepto.nombreServicio}</p:column>
            <p:column headerText="Fecha Vencimiento" styleClass="#{paymentBean.estiloCelda(concepto.recibo)}">#{concepto.fechaVencimiento}</p:column>
            <p:column headerText="#{commonBean.periodoAcademicoTexto}" styleClass="#{paymentBean.estiloCelda(concepto.recibo)} periodo">#{concepto.periodoacademico}</p:column>
            <p:column headerText="Periodo de Pago" styleClass="#{paymentBean.estiloCelda(concepto.recibo)}">#{concepto.periodopago}</p:column>
            <p:column headerText="Monto (S/.)" styleClass="#{paymentBean.estiloCelda(concepto.recibo)}">#{concepto.monto}</p:column>
            <p:column headerText="Monto" style="text-align:right;display:none;" styleClass="nroDoc">#{concepto.recibo}</p:column>
            <p:columnGroup type="footer">
              <p:row>
                <p:column colspan="7" style="text-align:right; font-weight: bold;" footerText="Total S/.: "/>
                <p:column footerText="#{paymentBean.montoTotal}" />
              </p:row>
              <p:row>
                <p:column colspan="7" style="text-align:right; font-weight: bold;" footerText="Total (S/.) seleccionado para pagar con VISA: "/>
                <p:column footerText="#{paymentBean.totalVisa}" />
              </p:row>
            </p:columnGroup>
          </p:dataTable>
          * Considere el orden de las cuotas para el pago.<br />
          ** Las cuotas sombreadas ya han sido canceladas.<br />
          *** <h:outputText value="#{commonBean.consideracionTexto}" /><br />
          <h:messages id="message" style="color:#ff0000; font-weight:bold;" >${message}</h:messages>
          <br />
			<div id="terminos">
				<p:dialog modal="true" widgetVar="statusDialog" header="Status"
					draggable="false" closable="false" resizable="false">
					<p:graphicImage value="/images/ajaxLoadingBar.gif" />
				</p:dialog>

				 <p:selectBooleanCheckbox value="#{paymentBean.aceptaTermino}" disabled="#{paymentBean.habilitaCheck}">
				 	<p:ajax update="botonPagar" listener="#{paymentBean.aceptaTerminosCondiciones}"/> 
				 </p:selectBooleanCheckbox> 
					<p:commandLink  id="downloadLink" value="#{commonBean.aceptoTerminosCondiciones}" ajax="false"
						onclick="PrimeFaces.monitorDownload(start, stop)"
						icon="ui-icon-arrowthichk-s">
						<p:fileDownload value="#{fileDownloadBean.file}" />
					</p:commandLink >
			
				<script type="text/javascript">
					function start() {
						statusDialog.show();
					}
			
					function stop() {
						statusDialog.hide();
					}
				</script>
			</div>
			<br />
			<h:commandButton type="submit" value=" Pagar con VISA " disabled="#{paymentBean.pagarDeshabilitado}"
          		action="#{paymentBean.registrarPago}" styleClass="Boton" id="botonPagar" onclick="return validarTransaccionVisa();">
          	</h:commandButton>
        </div>
        <p:dialog id="modalDialog" widgetVar="dlg2" modal="true">  
		    <h:outputText value="#{commonBean.mensajeErrorPeriodo}" />
		</p:dialog>
      </h:form>
    </div>
  </ui:define>
</ui:composition>